<template>
  <v-menu
    v-bind="$attrs"
    v-on="$listeners"
    :content-class="contentClass"
    offset-y
  >
    <template v-slot:activator="slotData">
      <slot v-bind="slotData">
        <v-icon v-on="slotData.on" small color="grey">mdi-dots-vertical</v-icon>
      </slot>
    </template>
    <v-list flat class="action-list">
      <v-list-item-group v-model="syncedCheck">
        <slot name="item">
          <v-list-item
            v-for="item in propItems"
            :key="item.text"
            :value="item.id"
            @click="clickHandle(item.clickHandle)"
            class="list-item"
            :class="{ 'list-item-active': syncedCheck === item.id }"
          >
            <v-list-item-title>
              <v-list-item-icon v-if="propShowCheckIcon" class="m1-0 mr-1">
                <v-icon class="check-icon" color="#EB9B31" size="14px">
                  {{ propCheckIcon }}
                </v-icon>
              </v-list-item-icon>
              <v-list-item-icon class="my-1">
                <v-icon class="delete-icon icon" v-text="item.icon"></v-icon>
              </v-list-item-icon>
              <span class="text" v-text="item.text"></span>
            </v-list-item-title>
          </v-list-item>
        </slot>
      </v-list-item-group>
    </v-list>
  </v-menu>
</template>
<script lang="ts">
import { Vue, Component, PropSync, Watch } from "vue-property-decorator";
@Component({
  props: {
    items: {
      type: Array,
      default: () => [],
    },
    "check-icon": {
      type: String,
      default: "mdi-check",
    },
    "show-check-icon": {
      type: Boolean,
      default: false,
    },
    mandatory: {
      type: Boolean,
      default: false,
    },
  },
})
export default class MenuList extends Vue {
  @PropSync("checked", { type: String }) syncedCheck!: string;
  @Watch("syncedCheck", { immediate: true })
  onCheckedValueChange(checkedValue: string) {
    if (!checkedValue && this.propItems && this.propItems.length) {
      this.syncedCheck = this.propItems[0].id;
    }
  }
  get propMandatory() {
    return this.$props.mandatory;
  }

  get propItems() {
    return this.$props.items;
  }

  get propCheckIcon() {
    return this.$props.checkIcon;
  }

  get propShowCheckIcon() {
    return this.$props.showCheckIcon;
  }

  get contentClass() {
    return `menu-list ${this.$attrs["content-class"]}`;
  }

  clickHandle(backfill: () => void | undefined) {
    backfill
      ? backfill()
      : () => {
          return;
        };
  }
}
</script>
<style lang="scss" scoped>
@import "./MenuList.scss";
</style>
